<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>ALLADYN Project homepage</title>
<link rel="stylesheet" href="../al.css" type="text/css">
<script src="../js/Alladyn.js" type="text/javascript"></script>
<script>
<!--
function main() {
	vlay.rect.vkf({left:500,top:200,vopacity:100,ct:0,cr:100,cb:100,cl:0},1)
	vlay.rect.vkf({left:600,top:50},50)
	vlay.rect.vkf({left:600,top:500,vopacity:30},50)
	vlay.rect.vkf({left:500,top:400,vopacity:0},50)
	vlay.rect.vkf({left:550,top:600,vopacity:100,ct:0,cr:5,cb:5,cl:0},50)
	vlay.rect.vkf({left:500,top:250,ct:0,cr:100,cb:100,cl:0},20)
	vlay.rect.van.go=true
}
//-->
</script>
<style type="text/css">
<!--
	div { font-family: "Trebuchet MS", "MS Sans Serif", "Arial CE", Arial, "Helvetica CE", Helvetica, sans-serif; font-size: 13px; line-height: 20px; color:#DDDDFF; }
	#rect { position: absolute; background-color: #FF0000; layer-background-color: #FF0000; width: 100px; height: 100px; top: 200px; left: 500px; zIndex: 1; }
	#tekst { position: absolute; width: 450px; zIndex: 2; border-width: 1px; border-style: solid; border-color: #DDDDFF; padding: 10px; top: 45px; }
	#head { position: absolute; top: 10px; }
//-->
</style>
</head>

<body background="../img/bg.gif" onload="Alladyn();main()">
<div id="head"><a href="http://alladyn.art.pl"><img src="../img/docs_exhead_eng.gif" width="450" height="35" alt="" border="0"></a></div>
<div id="rect"><img src="../img/empty.gif" width="100" height="100" alt="" border="0"></div>
<div id="tekst">
<div class="content">
	<span class="b">Example 6.1</span><br />
	Defining movement using <span class="b">vkf</span> method.<br /><br />
	Using <span class="b">vkf</span> method we define keyframes for our animation:<br />
	In the beginning, we define the first keyframe, from which the movement will start:
</div>
<div class="ex1">vlay.rect.vkf({left:500,top:200,vopacity:100, ct:0,cr:100,cb:100,cl:0},1)</div>
<div class="content">
	We define the starting parameters of movement - those which we'll be changing during the animation. In this exmple it is position <span class="i">left, top</span>, transparency <span class="i">vopacity</span> and clipping <span class="i">ct, cr, cb, cl</span>.<br /><br />
	Now we define next keyframes, which define layer parameters (position, transparency, clipping) and the number of frames for the movement:
</div>
<div class="ex1">
	vlay.rect.vkf({left:600,top:50},50)<br />
	vlay.rect.vkf({left:600,top:500,vopacity:30},50)<br />
	vlay.rect.vkf({left:500,top:400,vopacity:0},50)<br />
	vlay.rect.vkf({left:550,top:600,vopacity:100,ct:0, cr:5,cb:5,cl:0},50)<br />
	vlay.rect.vkf({left:500,top:250, ct:0,cr:100,cb:100,cl:0},20)<br />
</div>
<div class="content">
	To make it easier, in the example on the right side we named those points and described their <span class="i">vkf</span> parameters.<br /><br />
	If we want to animate the layer, we must set the <span class="b">go</span> property in it's <span class="b">van</span> object to <span class="i">true</span>:
</div>
<div class="ex1">vlay.rect.van.go=true</div>
<div class="content">
	Now, to activate the animation, the only thing we have to do is:
</div>
<div class="ex1">STPE.go("",50)</div>
<div class="content">
	Group name is "", so all layers are assigned to one group, and the frame interval is set to 50 miliseconds.<br /><br />
	<a href="javascript:STPE.go('',50)">Click here</a> to activate our example animation.
	<br /><br />
	<a href="javascript:history.back()">Back</a>
</div>
</div>
<div style="position: absolute; left: 500px; top: 200px;"><img src="../img/white.gif" width="2" height="2" alt="" border="0" align="top"> 1. vlay.rect.vkf({left:500,top:200,vopacity:100,ct:0,cr:100,cb:100,cl:0},1)</div>
<div style="position: absolute; left: 600px; top: 50px;"><img src="../img/white.gif" width="2" height="2" alt="" border="0" align="top"> 2. vlay.rect.vkf({left:600,top:50},50)</div>
<div style="position: absolute; left: 600px; top: 500px;"><img src="../img/white.gif" width="2" height="2" alt="" border="0" align="top"> 3. vlay.rect.vkf({left:600,top:500,vopacity:30},50)</div>
<div style="position: absolute; left: 500px; top: 400px;"><img src="../img/white.gif" width="2" height="2" alt="" border="0" align="top"> 4. vlay.rect.vkf({left:500,top:400,vopacity:0},50)</div>
<div style="position: absolute; left: 550px; top: 600px;"><img src="../img/white.gif" width="2" height="2" alt="" border="0" align="top"> 5. vlay.rect.vkf({left:550,top:600,vopacity:100,ct:0,cr:5,cb:5,cl:0},50)</div>
<div style="position: absolute; left: 500px; top: 250px;"><img src="../img/white.gif" width="2" height="2" alt="" border="0" align="top"> 6. vlay.rect.vkf({left:500,top:250,ct:0,cr:100,cb:100,cl:0},20)</div>
</body>
</html>

